import React, { useState, useEffect } from 'react';
import { Card, List, Row, Col, Layout, Space, Tag } from 'antd';
import { LeftOutlined, RightOutlined, EnvironmentTwoTone, ShoppingTwoTone, RightCircleTwoTone, SnippetsTwoTone } from '@ant-design/icons';
import './index.css';
import { useNavigate, useParams } from 'react-router-dom';
import OrderHelpComponent from '../../components/OrderComponent/OrderHelpComponent';

const { Content } = Layout;

const OrderPage = () => {
  const { id } = useParams();
  const [orderDetails, setOrderDetails] = useState(null);
  const [products, setProducts] = useState([]);
  const navigate = useNavigate();

  const fetchOrderAndProductDetails = () => {
    const orderData = JSON.parse(localStorage.getItem('orderList') || '[]');
    const productData = JSON.parse(localStorage.getItem('productList') || '[]');
    const order = orderData.find(order => order.orderId === Number(id));
    console.log("order:",order);
    console.log("orderData:",orderData);
    setOrderDetails(order);
    setProducts(productData);
  };


  useEffect(() => {
    fetchOrderAndProductDetails();

    const handleStorageChange = () => {
      fetchOrderAndProductDetails();
    };

    window.addEventListener('storage', handleStorageChange);

    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []);

  if (!orderDetails) {
    return null;
  }

  const handleBack = () => {
    navigate('/');
  };

  const { address, productList, cost, discount, shipping, note, paymentMethod, submitTime } = orderDetails;

  return (
      <Layout style={{ minHeight: '100vh', maxWidth: 414, margin: 'auto', backgroundColor: '#fff' }}>
        <div className="header-container" style={{ marginTop: 10, textAlign: "center", display: "flex", alignItems: "center" }}>
          <LeftOutlined style={{ marginLeft: '20px' }} onClick={handleBack} />
          <h2 style={{ textAlign: "center", margin: "0 auto", padding: '15px' }}>订单信息</h2>
        </div>
        <Content style={{ padding: '15px' }}>
          <Card>
            <div style={{ display: 'flex' }}>
              <EnvironmentTwoTone twoToneColor="#FB5B40" />
              <h3 style={{ marginLeft: '10px' }}> 地址信息</h3>
              <RightOutlined style={{ marginLeft: 'auto' }} />
            </div>
            <h3>{address}</h3>
            <span>张三  12345678901</span>
          </Card>

          <Card bordered={false} style={{ marginTop: '15px' }}>
            <div style={{ display: 'flex' }}>
              <ShoppingTwoTone twoToneColor="#FB5B40" />
              <h3 style={{ marginLeft: '10px' }}>商品信息</h3>
            </div>
            <List
                itemLayout="vertical"
                size="large"
                dataSource={productList}
                renderItem={product => (
                    <List.Item key={product.id}>
                      <div className="product-item">
                        <div className="product-image">
                          <img src={product.details[0]} alt={product.productName} />
                        </div>
                        <div className="product-details">
                          <div className="product-name">{product.productName}</div>
                          <div className="product-description">{product.description}</div>
                          <Tag color="orange" style={{ marginTop: '8px' }}>{product.services}</Tag>
                        </div>
                        <div className="product-price">￥{product.price}</div>
                      </div>
                    </List.Item>
                )}
            />
            <List
                className="bordered-list"
                dataSource={['优惠卷', '配送服务', '运费险']}
                renderItem={item => (
                    <List.Item style={{ display: 'flex', alignItems: 'center' }}>
                      <span style={{ fontSize: '17px', flex: 1 }}>{item}</span>
                      <span>未选择</span>
                      <RightCircleTwoTone twoToneColor="#FB5B40" style={{ fontSize: '20px', marginLeft: '10px' }} />
                    </List.Item>
                )}
                style={{ marginTop: '20px' }}
            />
          </Card>

          <Card bordered={false} style={{ marginTop: '15px' }}>
            <div style={{ display: 'flex' }}>
              <SnippetsTwoTone twoToneColor="#FB5B40" />
              <h3 style={{ marginLeft: '10px' }}>订单信息</h3>
            </div>
            <Card bordered={false}>
              <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
                <Row>
                  <Col span={8}><strong>金额:</strong></Col>
                  <Col span={16}>{cost}</Col>
                </Row>
                <Row>
                  <Col span={8}><strong>优惠:</strong></Col>
                  <Col span={16}>{discount}</Col>
                </Row>
                <Row>
                  <Col span={8}><strong>运费:</strong></Col>
                  <Col span={16}>{shipping}</Col>
                </Row>
                <Row>
                  <Col span={8}><strong>备注:</strong></Col>
                  <Col span={16}>{note}</Col>
                </Row>
                <Row>
                  <Col span={8}><strong>支付方式:</strong></Col>
                  <Col span={16}>{paymentMethod}</Col>
                </Row>
                <Row>
                  <Col span={8}><strong>提交时间:</strong></Col>
                  <Col span={16}>{submitTime}</Col>
                </Row>
              </Space>
            </Card>
          </Card>
          <div style={{ height: '70px' }}></div>
        </Content>
        <OrderHelpComponent cost={cost + shipping - discount} id={id}/>
      </Layout>
  );
};

export default OrderPage;
